<template>
  <div>
    <div class="top_parent">
      <img src="../../assets/image/activity/activity_banner.png" style="width:100%" alt />
      <div class="bread">
        <p v-if="$route.query.orderId=='活动预告'">
          <router-link to="/">首页</router-link>》活动 》活动预告
        </p>
        <p v-if="$route.query.orderId=='文博课堂'">
          <router-link to="/">首页</router-link>》活动 》文博课堂
        </p>
        <p v-if="$route.query.orderId=='文博讲座'">
          <router-link to="/">首页</router-link>》活动 》文博讲座
        </p>
        <p v-if="$route.query.orderId=='青少年活动'">
          <router-link to="/">首页</router-link>》活动 》青少年活动
        </p>
      </div>
    </div>
    <div class="bg_person">
      <div class="content gwgk">
        <div class="left">
          <ul>
            <li @click="tiaoz1(index+1)" v-for="(item,index) of nav" :key="index">
              <!-- <router-link :to="zhiyuanzhezhijia"> -->
              <span :class="{blue:$route.query.orderId==item.name}">{{item.name}}</span>
              <!-- </router-link> -->
            </li>
          </ul>
        </div>

        <div class="right">
          <router-view></router-view>
        </div>
        <div></div>
      </div>
    </div>
    <foot2 class="dibu"></foot2>
  </div>
</template>
<script>
import foot2 from "../../components/foot2";
export default {
  data() {
    return {
      choose: "",

      nav: [
        {
          name: "活动预告",
        },
        {
          name: "文博课堂",
        },
        {
          name: "文博讲座",
        },
        {
          name: "青少年活动",
        },
      ],
      index: 1,
    };
  },
  components: {
    foot2: foot2,
  },
  methods: {
    tiaoz1(i) {
      // this.$router.push(0)
      if (i == 1) {
        this.$router
          .push({
            path: "/huodongyugao/huodongyugao2/:id",
            query: { orderId: "活动预告", bool: true },
          })
          .catch((err) => {
            err;
          });
      } else if (i == 3) {
        this.$router
          .push({
            path: "/huodongyugao/wenbojiangzuo/:id",
            query: { orderId: "文博讲座", bool: true },
          })
          .catch((err) => {
            err;
          });
      }
      if (i == 2 || i == 4) {
        if (i == 2) {
          this.sort = "wenboketang";
          this.orderId = "文博课堂";
        } else if (i == 4) {
          this.sort = "qingshaonianhuodong";
          this.orderId = "青少年活动";
        }
        this.$router
          .push({
            path: "/huodongyugao/wenboketang/:id",
            query: { orderId: this.orderId, ketang: this.sort },
          })
          .catch((err) => {
            err;
          });
      }
    },
  },
};
</script>
<style scoped>
a {
  text-decoration: none;
  color: #6e6e6e;
}
.top_parent {
  position: relative;
}
.top_parent .bread {
  max-width: 1200px;
  margin: auto;
}
.top_parent p {
  position: absolute;
  bottom: 20px;
  color: #6e6e6e;
}

.bg_person {
  width: 100%;
  height: 100%;
  background: url("../../assets/image/show_bg2.png");
  background-repeat: no-repeat;
}
.gwgk.content {
  display: flex;

  color: #4e4b4b;
  width: 1200px;

  margin: auto;
  padding-top: 44px;
  box-sizing: border-box;
}
.gwgk .title {
  font-size: 24px;
  border-bottom: 2px solid rgb(107, 128, 173);
  color: #4e69a1;
}
.gwgk li {
  list-style: none;
}
.gwgk ul,
li,
p {
  padding: 0px;
  margin: 0px;
}
.gwgk .left {
  width: 195px;
  background: url("../../assets/image/left_nav.png") no-repeat;
}
.gwgk .left ul {
  padding: 30px;
  box-sizing: border-box;
}
.gwgk .left ul li {
  font-size: 18px;
  color: #6e6e6e;
  width: 140px;
  cursor: pointer;
  box-sizing: border-box;
}
.gwgk .left ul li:first-child {
  padding-top: 0px;
  padding-bottom: 16px;
}

.gwgk .left ul li span {
  display: inline-block;
  margin-left: 22px;
}
.gwgk .left ul li:not(:last-child) {
  border-bottom: 2px solid #9e9e9e;
  margin-bottom: 20px;
  padding-bottom: 16px;
}
.gwgk .right {
  width: 940px;

  padding: 0 16px 0;
  box-sizing: border-box;
}

.gwgk .blue {
  color: #003567;
}
</style>